<template>
  <el-dialog
    v-model="dialogVisible"
    v-if="load"
    :close-on-click-modal="false"
    title="查看图片"
    width="936"
    :before-close="handleClose"
    :z-index="2000"
  >
    <template v-if="images_assignment_list.length">
      <div
        class="mt-4"
        v-for="item of images_assignment_list"
        :key="item.custom_tag"
        style="margin-bottom: 20px"
      >
        <el-tabs v-model="activeName" type="card" class="demo-tabs">
          <el-tab-pane :label="item.custom_tag || '暂无标签名'" :name="item.custom_tag">
            <div v-for="imageListItem of item.image_list" :key="imageListItem.type">
              <div
                style="
                  padding: 15px 0;
                  text-align: center;
                  border-bottom: 1px solid #e4e7ed;
                  border-left: 1px solid #e4e7ed;
                  border-right: 1px solid #e4e7ed;
                "
              >
                {{ imageListItem.label_type }}（{{ imageListItem.values.length }}）
              </div>
              <ul
                style="
                  padding: 16px 16px 16px 19px;
                  border: 1px solid #e4e7ed;
                  margin-top: -1px;
                  border-bottom-right-radius: 4px;
                  border-bottom-left-radius: 4px;
                  display: flex;
                  align-items: center;
                  flex-flow: wrap;
                "
              >
                <li
                  style="margin-bottom: 10px"
                  class="listMr"
                  v-for="(imgChilder, idx) of imageListItem.values"
                  :key="idx"
                >
                  <VImage
                    :src="imgChilder.image_link"
                    :width="128"
                    :height="128"
                    :previewlist="photoSort(imgChilder, imageListItem.values)"
                  >
                  </VImage>

                  <div class="overflow-line1" style="width: 128px">
                    {{ imgChilder.image_name }}
                  </div>
                </li>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    <el-empty v-else :image-size="200" description="暂无图片" />

    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
      "
    >
      <el-button type="" @click="dialogVisible = false"> 关闭 </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import VImage from "@/components/Image/index.vue";
import { photoSort } from "@/utils/index";
import { getSampleImagesDetail } from "../api/index.js";
import { reactive, ref, toRefs } from "vue";

const data = reactive({
  images_assignment_list: [],
  dialogVisible: false,
  activeName: "",
  load: false,
});

const { images_assignment_list, dialogVisible, activeName, load } = toRefs(data);

const open = async (sku_id) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  getImagesDetail(sku_id);
  dialogVisible.value = true;
};

const getImagesDetail = async (id) => {
  try {
    const res = await getSampleImagesDetail({
      id,
    });
    images_assignment_list.value = res.data;
    activeName.value = res.data[0].custom_tag;
  } catch (e) {
    throw Error(e);
  }
};

const handleClose = (done) => {
  done();
};

defineExpose({ open });
</script>
<style lang="scss" scoped>
:deep(.el-tabs__header) {
  margin-bottom: 0;
}

.listMr {
  margin-right: 18px;

  &:nth-of-type(6n + 6) {
    margin-right: 0;
  }
}
</style>
